<!-- 属性面板 -->
<template>
    <div>
        <div class="approval-attributes" v-if="display">
            <div class="mask"></div>
            <div class="approval-editor-drawer">
                <div class="approval-editor-content">
                    <div class="approval-editor-name-wrapper">
                        <div class="approval-editor-name">
                            <input v-model="approvalData.approvalName" class="approval-name-editor-input readonly"
                                type="text">
                        </div>
                    </div>
                    <!-- 条件分支 -->
                    <div class="approval-editor-form" v-if="approvalData.flowType === 'condition'">
                        <div v-for="(group, groupIndex) in approvalData.conditionGroups">
                            <div class="item-content more-info">
                                <p v-if="groupIndex == 0">满足以下条件时进入当前分支</p>
                                <p v-else>或满足</p>
                            </div>
                            <div class="panel">
                                <div class="header">
                                    <span>{{ group.name }}</span>
                                </div>
                                <div class="content">
                                    <div class="item-content more-info">
                                        <p>当</p>
                                    </div>
                                    <div class="condition-groups">
                                        <div class="condition-group" v-for="(condition, index) in group.conditions">
                                            <div class="item-content more-info" v-if="index >= 1">
                                                <p>且</p>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <select v-model="condition.field" class="eic-input">
                                                        <option value="提交人">提交人</option>
                                                        <option value="收款发生日期">收款发生日期</option>
                                                        <option value="收款类别">收款类别</option>
                                                        <option value="收款金额">收款金额</option>
                                                        <option value="归属人">归属人</option>
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <select v-model="condition.expression" class="eic-input">
                                                        <option value="早于">早于</option>
                                                        <option value="晚于">晚于</option>
                                                        <option value="等于">等于</option>
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <select v-model="condition.target" class="eic-input">
                                                        <option value="审批提交时间">审批提交时间</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-approver-setting">
                                            <div class="add-operator" @click="addCondition(group)">＋ 添加条件</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="fz-btn" type="button" style="width: 100%;margin: 10px 0 0 0;"
                            @click="addConditionGroup(approvalData.conditionGroups)">+添加条件组</button>
                    </div>

                    <div class="approval-editor-form">
                        <div class="item-wrapper">
                            <div class="approval-type-wrapper" v-if="approvalData.flowType === 'approval'">
                                <div class="item-key-wrapper">
                                    <div class="item-key">审批类型</div>
                                    <label>
                                        <input value="不计入审批效率统计" type="checkbox">
                                        <span>不计入审批效率统计</span>
                                    </label>
                                </div>
                                <div class="item-content">
                                    <div class="radio-line-group">
                                        <label v-for="approvalMethod in approvalConfig.approvalMethods">
                                            <input :value="approvalMethod" v-model="approvalData.approvalMethod"
                                                type="radio">
                                            <span>{{ approvalMethod }}</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="approvalData.approvalMethod === '人工审批'">
                            <div class="approval-editor-tab-wrapper"
                                v-if="approvalData.flowType === 'approval' || approvalData.flowType === 'cc'">
                                <div class="approval-function-btn-group">
                                    <div class="btn approval-function-btn active">设置审批人</div>
                                    <div class="btn approval-function-btn ">表单权限</div>
                                    <div class="btn approval-function-btn " v-if="approvalData.flowType === 'approval'">
                                        操作权限</div>
                                </div>
                                <div class="approval-function-content-approver-set setting-panel">
                                    <div class="approvers-container" v-if="approvalData.flowType === 'approval'">
                                        <div class="approval-function-setting-content"
                                            v-for="approver in approvalData.approvalTargets">
                                            <div class="approver-setting">
                                                <div class="header">
                                                    <span>审批人</span>
                                                    <span class="close-btn" @click="removeApprover(approver)"
                                                        v-if="approvalData.approvalTargets.length > 1">×</span>
                                                </div>
                                                <div class="radio-line-group">
                                                    <label v-for="target in approvalConfig.approvalTargets">
                                                        <input :value="target" v-model="approver.target" type="radio">
                                                        <span>{{ target }}</span>
                                                    </label>
                                                </div>
                                                <div class="sub-content">
                                                    <div class="sub-content-top-line"></div>
                                                    <div class="sub-approver approver-user-selector add-user"
                                                        v-show="approver.target == '指定成员'">
                                                        <p>
                                                            <span>添加成员</span>
                                                            <span class="light-text">（不能超过25人）</span>
                                                        </p>
                                                        <div class="add-approver-wrapper">
                                                            <div class="add-approver-btn"
                                                                @click="addApprover(approver.users)">+</div>
                                                            <div class="add-approver-item"
                                                                v-for="user in approver.users">
                                                                <img
                                                                    src="https://s3-imfile.feishucdn.com/static-resource/v1/v2_4cb935f7-a445-4c1f-a40c-ed52e7f0eb7g~?image_size=32x32&amp;cut_type=&amp;quality=&amp;format=image&amp;sticker_format=.webp">
                                                                <div>{{ user }}</div>
                                                                <div class="close-btn">×</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="sub-approver approver-user-selector role-user"
                                                        v-show="approver.target == '角色'">
                                                        <p>选择角色</p>
                                                        <div class="add-approver-wrapper role-selector-wrapper">
                                                            <div class="radio-line-group">
                                                                <label>
                                                                    <input value="单选"
                                                                        name="fanwei-grouply1kedkhocyn7jao17i"
                                                                        checked="true" type="radio">
                                                                    <span>单选</span>
                                                                </label>
                                                                <label>
                                                                    <input value="多选"
                                                                        name="fanwei-grouply1kedkhocyn7jao17i"
                                                                        type="radio">
                                                                    <span>多选</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <p class="选择范围"></p>
                                                        <div class="add-approver-wrapper role-selector-wrapper">
                                                            <div class="radio-line-group" style="display: none;">
                                                                <label>
                                                                    <input value="全公司"
                                                                        name="role-grouply1kedkhhjfsf44ewi"
                                                                        checked="true" type="radio">
                                                                    <span>全公司</span>
                                                                </label>
                                                                <label>
                                                                    <input value="指定成员"
                                                                        name="role-grouply1kedkhhjfsf44ewi"
                                                                        type="radio">
                                                                    <span class="">指定成员</span>
                                                                </label>
                                                                <label>
                                                                    <input value="指定角色"
                                                                        name="role-grouply1kedkhhjfsf44ewi"
                                                                        type="radio">
                                                                    <span>指定角色</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="sub-approver approver-user-selector add-user"
                                                            style="display: none;">
                                                            <p>
                                                                <span>添加成员</span>
                                                                <span class="light-text">（不能超过25人）</span>
                                                            </p>
                                                            <div class="add-approver-wrapper">
                                                                <div class="add-approver-btn">+</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="sub-approver approver-user-selector user-group"
                                                        v-show="approver.target == '用户组'">
                                                        <p>用户组</p>
                                                        <div class="add-approver-wrapper usergroup-selector-wrapper">
                                                            <div class="supervisor-select">
                                                                <select>
                                                                    <option>用户组1</option>
                                                                    <option>用户组2</option>
                                                                    <option>用户组3</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="role-info">
                                                            <span>仅展示可见范围内的用户组，可前往</span>
                                                            <a href="https://www.baidu.com">管理后台</a>
                                                            <span>进行配置</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="add-approver-setting" v-if="approvalData.flowType === 'approval'">
                                        <div class="add-operator" @click="addApproverTargetPanel">＋ 添加审批人</div>
                                    </div>
                                </div>
                                <div class="item-wrapper" v-if="approvalData.approverMultipleWhen">
                                    <div class="item-key">多人审批时</div>
                                    <div class="item-content">
                                        <div class="radio-line-group">
                                            <label class=" display-block">
                                                <input value="会签" v-model="approvalData.approverMultipleWhen.action"
                                                    name="approvel-typely1kedkij9vggj6wxdk" type="radio">
                                                <span>会签（需所有人审批人同意）</span>
                                            </label>
                                            <label class=" display-block">
                                                <input value="或签（一名审批人同意即可）"
                                                    v-model="approvalData.approverMultipleWhen.action"
                                                    name="approvel-typely1kedkij9vggj6wxdk" type="radio">
                                                <span>或签（一名审批人同意即可）</span>
                                            </label>
                                            <label class=" display-block">
                                                <input value="依次审批" v-model="approvalData.approverMultipleWhen.action"
                                                    class="approvel-typely1kedkij9vggj6wxdk" type="radio">
                                                <span>依次审批（按顺序依次审批）</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-wrapper" v-if="approvalData.approverNoExistWhen">
                                    <div class="item-key">审批人为空时</div>
                                    <div class="item-content">
                                        <div class="radio-line-group">
                                            <label>
                                                <input value="自动通过" name="approvel-typely1kedkiyb5ike3v0ce"
                                                    v-model="approvalData.approverNoExistWhen.action" type="radio">
                                                <span>自动通过</span>
                                            </label>
                                            <label>
                                                <input value="指定人员审批" v-model="approvalData.approverNoExistWhen.action"
                                                    name="approvel-type" type="radio">
                                                <span>指定人员审批</span>
                                            </label>
                                            <label>
                                                <input value="转交给管理员审批"
                                                    v-model="approvalData.approverNoExistWhen.action"
                                                    name="approvel-type" type="radio">
                                                <span>转交给管理员审批</span>
                                            </label>
                                        </div>
                                        <div class="sub-approver approver-user-selector add-user"
                                            v-show="approvalData.approverNoExistWhen.action == '指定人员审批'">
                                            <p>
                                                <span>添加成员</span>
                                                <span class="light-text">（不能超过25人）</span>
                                            </p>
                                            <div class="add-approver-wrapper">
                                                <div class="add-approver-btn">+</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-wrapper" v-if="approvalData.approverPresentWhen">
                                    <div class="item-key">审批人与提交人为同一人时</div>
                                    <div class="item-content">
                                        <div class="radio-line-group">
                                            <label>
                                                <input v-model="approvalData.approverPresentWhen.action"
                                                    value="由提交人自己审批" name="approvel-typely1kedki5xrabhp4iu8"
                                                    type="radio">
                                                <span>由提交人自己审批</span>
                                            </label>
                                            <label>
                                                <input v-model="approvalData.approverPresentWhen.action" value="自动跳过"
                                                    name="approvel-typely1kedki5xrabhp4iu8" type="radio">
                                                <span>自动跳过</span>
                                            </label>
                                            <label>
                                                <input v-model="approvalData.approverPresentWhen.action" value="转交给直属上级"
                                                    name="approvel-typely1kedki5xrabhp4iu8" type="radio">
                                                <span>转交给直属上级</span>
                                            </label>
                                            <label>
                                                <input v-model="approvalData.approverPresentWhen.action"
                                                    value="转交部门负责人审批" name="approvel-typely1kedki5xrabhp4iu8"
                                                    type="radio">
                                                <span>转交部门负责人审批</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-wrapper" v-if="approvalData.flowType === 'approval'">
                                    <div class="item-key">提示</div>
                                    <div class="item-content more-info">
                                        <p>若审批人离职，会自动转交给审批人的上级代为处理</p>
                                        <p><span>若同一审批人在流程中重复出现，默认只审批一次。可前往</span><span
                                                class="goto-other-setting">更多设置</span><span>修改</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-wrapper"
                            v-if="approvalData.flowType === 'cc' || approvalData.flowType === 'approval'">
                            <div class="item-key">抄送人设置</div>
                            <div class="item-content cc-container">
                                <div class="approval-function-setting-content"
                                    v-for="approver in approvalData.ccTargets">
                                    <div class="approver-setting">
                                        <div class="header">
                                            <span>抄送人</span>
                                            <span class="close-btn" @click="removeCc(approver)"
                                                v-if="approvalData.ccTargets.length > 1">×</span>
                                        </div>
                                        <div class="radio-line-group">
                                            <label v-for="target in approvalConfig.approvalTargets">
                                                <input :value="target" v-model="approver.target" type="radio">
                                                <span>{{ target }}</span>
                                            </label>
                                        </div>
                                        <div class="sub-content">
                                            <div class="sub-content-top-line"></div>
                                            <div class="sub-approver approver-user-selector add-user"
                                                v-show="approver.target == '指定成员'">
                                                <p>
                                                    <span>添加成员</span>
                                                    <span class="light-text">（不能超过25人）</span>
                                                </p>
                                                <div class="add-approver-wrapper">
                                                    <div class="add-approver-btn" @click="addApprover(approver.users)">+
                                                    </div>
                                                    <div class="add-approver-item" v-for="user in approver.users">
                                                        <img
                                                            src="https://s3-imfile.feishucdn.com/static-resource/v1/v2_4cb935f7-a445-4c1f-a40c-ed52e7f0eb7g~?image_size=32x32&amp;cut_type=&amp;quality=&amp;format=image&amp;sticker_format=.webp">
                                                        <div>{{ user }}</div>
                                                        <div class="close-btn">×</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="sub-approver approver-user-selector role-user"
                                                v-show="approver.target == '角色'">
                                                <p>选择角色</p>
                                                <div class="add-approver-wrapper role-selector-wrapper">
                                                    <div class="radio-line-group">
                                                        <label>
                                                            <input value="单选" name="fanwei-grouply1kedkhocyn7jao17i"
                                                                checked="true" type="radio">
                                                            <span>单选</span>
                                                        </label>
                                                        <label>
                                                            <input value="多选" name="fanwei-grouply1kedkhocyn7jao17i"
                                                                type="radio">
                                                            <span>多选</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <p class="选择范围"></p>
                                                <div class="add-approver-wrapper role-selector-wrapper">
                                                    <div class="radio-line-group" style="display: none;">
                                                        <label>
                                                            <input value="全公司" name="role-grouply1kedkhhjfsf44ewi"
                                                                checked="true" type="radio">
                                                            <span>全公司</span>
                                                        </label>
                                                        <label>
                                                            <input value="指定成员" name="role-grouply1kedkhhjfsf44ewi"
                                                                type="radio">
                                                            <span class="">指定成员</span>
                                                        </label>
                                                        <label>
                                                            <input value="指定角色" name="role-grouply1kedkhhjfsf44ewi"
                                                                type="radio">
                                                            <span>指定角色</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="sub-approver approver-user-selector add-user"
                                                    style="display: none;">
                                                    <p>
                                                        <span>添加成员</span>
                                                        <span class="light-text">（不能超过25人）</span>
                                                    </p>
                                                    <div class="add-approver-wrapper">
                                                        <div class="add-approver-btn">+</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="sub-approver approver-user-selector user-group"
                                                v-show="approver.target == '用户组'">
                                                <p>用户组</p>
                                                <div class="add-approver-wrapper usergroup-selector-wrapper">
                                                    <div class="supervisor-select"><select>
                                                            <option>用户组1</option>
                                                            <option>用户组2</option>
                                                            <option>用户组3</option>
                                                        </select></div>
                                                </div>
                                                <div class="role-info">
                                                    <span>仅展示可见范围内的用户组，可前往</span>
                                                    <a href="https://www.baidu.com">管理后台</a>
                                                    <span>进行配置</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="item-content">
                                <div class="add-operator" @click="addCcTargetPanel">＋ 添加抄送人</div>
                            </div>
                        </div>
                        <div class="item-wrapper"
                            v-if="approvalData.flowType === 'cc' || approvalData.flowType === 'approval'">
                            <div class="item-key">提示</div>
                            <div class="item-content more-info">
                                <p>抄送的人数最多支持100人以内</p>
                            </div>
                        </div>
                    </div>
                    <div class="approval-editor-footer-wrapper">
                        <div class="btn-group">
                            <button class="fz-btn primary" type="button" @click="save">保存</button>
                            <button class="fz-btn cancel" type="button" @click="cancel">取消</button>
                            <span v-show="errMsg != null"
                                style="color: red;font-size: 12px;display: inline-block;padding: 0 10px 0 10px;">{{
            errMsg }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <button class="fz-btn primary submit-btn" onclick="submitFlow()" type="button" @click="save">保存</button> -->
    </div>
</template>
<script>
export default {
    props: {
        approvalData: {
            type: Object,
            default: () => {
                return {
                    "approvalName": "顶头上司审批",
                    "flowType": "approval",
                    "approvalMethod": "人工审批",
                    "placeholder": "提交人：请选择审批人"
                }
            }
        },
        display: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    created() {
        //this.approvalAttributeDisplay = this.display;
    },
    watch: {
        display(old, n) {
            console.log("是啊")
            this.approvalAttributeDisplay = n;
        }
    },
    data() {
        return {
            errMsg: null,
            approvalAttributeDisplay: false,
            approvalConfig: {
                approvalTargets: ['上级', '部门负责人', '角色', '用户组', '指定成员', '提交人自选', '提交人本人', '节点审批人', '连续多级上级', '连续多级部门负责人', '表单内联系人', '表单内部门'
                ],
                approvalMethods: ["人工审批", "自动通过", "自动拒绝"]
            },
            approvalNameEditorFlag: false,
            //审批节点
            flowNode: null
        }
    },
    methods: {
        addApproverTargetPanel() {
            this.approvalData.approvalTargets.push({
                target: "指定成员",
                users: []
            })
        },
        removeApprover(approver) {
            this.approvalData.approvalTargets = this.approvalData.approvalTargets.filter(item => item !== approver)
        },
        addCcTargetPanel() {
            this.approvalData.ccTargets.push({
                target: "指定成员",
                users: []
            })
        },
        removeCc(cc) {
            this.approvalData.ccTargets = this.approvalData.ccTargets.filter(item => item !== cc)
        },
        save() {
            console.log(JSON.stringify(this.approvalData));
            if (this.approvalData.flowType === 'approval' && this.approvalData.approvalMethod === '人工审批') {
                //数据校验
                for (var i = 0; i < this.approvalData.approvalTargets.length; i++) {
                    let approvalTarget = this.approvalData.approvalTargets[i]

                    if (approvalTarget.users.length == 0) {
                        this.errMsg = "请选择审批人";
                        return;
                    } else {
                        this.errMsg = null;
                    }
                }
            }
            this.$emit('close')
        },
        cancel() {
            this.$emit('close')
        },
        show(flowNode) {
            console.log("flowNode", flowNode)
            this.approvalAttributeDisplay = true;
            this.flowNode = flowNode;
            this.approvalData = JSON.parse(JSON.stringify(this.flowNode.getData()));
        },
        copyObject(source, target) {
            for (let key in source) {
                let val = source[key];
                console.log("object type:", typeof (val))
                if (val) {
                    if (typeof (val) == "object") {
                        this.copyObject(val, target[key])
                    } else {
                        target[key] = val;
                    }
                }
            }
        },
        addApprover(users) {
            console.log("users：", users)
            let user = prompt("清输入人员姓名：");
            users.push(user)
        },
        addCondition(conditionGroup) {
            conditionGroup.conditions.push({})
        },
        addConditionGroup(group) {
            group.push({ "name": "条件" + (this.approvalData.conditionGroups.length + 1), "conditions": [{ "field": "姓名", "expression": "等于", "target": "李飞飞" }] })
        }
    }
}
</script>
<style scoped>
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slide-in {
    from {
        right: 0px;
        /* 动画开始的位置 */
        opacity: 0;
        /* 开始时不可见 */
    }

    to {
        right: 400px;
        /* 动画结束位置 */
        opacity: 1;
        /* 完全可见 */
    }
}

div {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

label {
    cursor: pointer;
}

#flow-container {
    /* width: 900px; */
    margin: 0 auto;
    display: inline-flex;
    flex-direction: column;

}

.branch .nodes {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.flow-node {}

.flow-node .approval,
.flow-node .cc,
.flow-node .handle,
.flow-node .start,
.flow-node .end,
.flow-node .condition {
    width: 200px;
    height: 150px;
    position: relative;

}

.flow-node .flow-node-container {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 200px;
    max-height: 92px;
    cursor: pointer;
    background: #a9b4cd;
    border-radius: 8px;
    overflow: hidden;
}


.flow-node .flow-node-container .node-title {
    display: flex;
    justify-content: space-between;
    height: 28px;
    font-size: 12px;
    padding: 2px 4px;
    color: #fff;
}

.flow-node .flow-node-container .disabled {
    color: #8f959e !important;
}

.flow-node .flow-node-container .node-title>.label {
    padding: 0 4px;
    margin: 2px 4px;
    border-radius: 6px;
    line-height: 20px;
}

.flow-node .flow-node-container .node-title>.label:hover {
    background-color: rgba(31, 35, 41, .1);
}

.flow-node .flow-node-container .node-title .close-btn {
    font-size: 18px;
    line-height: 16px;
    padding-right: 4px;
    display: none;
}

.flow-node .flow-node-container .node-title .close-btn:hover {
    font-size: 20px;
}

.flow-node .approval .flow-node-container {
    background-color: #f80;
    box-shadow: 0 0 3px 0 #ff5b4c;
}

.flow-node .cc .flow-node-container {
    background-color: #3370ff;
}

.flow-node .handle .flow-node-container {
    background-color: #935af6;
    box-shadow: 0 0 3px 0 #935af6;
}

.flow-node.condition .flow-node-container {
    background-color: #fff;
}

.flow-node.condition .flow-node-container .node-title {
    color: #2eb795;
    border-bottom: 1px solid #f6f6f7;
}

.flow-node .flow-node-container .node-content {
    background-color: #fff;
    padding: 7px 6px 7px 7px;
    margin: 0 4px 4px;
    border-radius: 4px;
    font-size: 14px;
    color: #3e4759;
}

.flow-node .approval>.bottom-v-line,
.flow-node .cc>.bottom-v-line,
.flow-node .handle>.bottom-v-line,
.flow-node .start>.bottom-v-line,
.flow-node .condition>.bottom-v-line {
    position: absolute;
    background-color: #c2c5cc;
    width: 1px;
    height: 150px;
    bottom: 1px;
    left: 99.5px;
    box-sizing: border-box;
    z-index: -1;
}

.add-node-btn {
    position: absolute;
    box-sizing: initial;
    left: 85px;
    height: 28px;
    width: 28px;
    bottom: 31px;
}

.add-node-btn .add-btn {
    height: 28px;
    width: 28px;
    color: #37f;
    text-align: center;
    border-radius: 50%;
    border: 1px solid transparent;
    font-size: 24px;
    line-height: 24px;
    background-color: #fff;
    filter: drop-shadow(0 4px 8px rgba(31, 35, 41, .1));
    cursor: pointer;
}

.add-btn:hover {
    border-color: #3370ff;
    background-color: #fff;
    box-shadow: 0 6px 24px rgba(51, 112, 255, .24);
}

.add-node-btn .add-node-types {
    display: none;
    position: absolute;
    top: -2px;
    left: 38px;
    width: 181px;
    background-color: #fff;
    color: #1f2329;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 3px;
    box-shadow: 0 8px 24px 8px rgba(31, 35, 41, .04), 0 6px 12px 0 rgba(31, 35, 41, .04), 0 4px 8px -8px rgba(31, 35, 41, .06);
    font-size: 14px;
    z-index: 999999;
    animation: fadeIn 0.06s ease-in-out forwards;
}

.add-node-btn .add-node-types .node-type-wrap {
    line-height: 1.5;
    font-variant: tabular-nums;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
}

.add-node-btn .add-node-types .node-type-wrap:hover {
    background-color: rgba(31, 35, 41, .08);
}

.add-node-btn .add-node-types .node-type-wrap .node-type {
    display: flex;
}

.add-node-btn .add-node-types .node-type-wrap .node-type .node-type-icon {
    width: 16px;
    margin-right: 8px;
}

.add-node-btn .add-node-types .node-type-wrap .node-type img {
    width: 16px;
    position: absolute;
    top: 12px;
}

.bottom-v-arrow {
    width: 10px;
    height: 10px;
    left: calc(50% - 5px);
    transform: matrix(1, 0, 0, -1, 0, 0);
    border-bottom: 10px solid #c2c5cc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    background-color: #f0f0f2;
    box-sizing: border-box;
}

.flow-node .approval>.bottom-v-arrow,
.flow-node .cc>.bottom-v-arrow,
.flow-node .handle>.bottom-v-arrow,
.flow-node .start>.bottom-v-arrow,
.flow-node .route>.bottom-v-arrow,
.flow-node .condition>.bottom-v-arrow {
    position: absolute;
    bottom: 0px;
}

.branch>.bottom-v-arrow {

    bottom: 0px;

}

/* route */
.route {
    display: flex;
    flex-direction: column;
    position: relative;
    /* border: 1px dotted red; */
}

.route div {
    box-sizing: border-box;
}

.route .top-h-line {
    transform: translateY(-11px);
    height: 1px;
    background-color: #c2c5cc;
    margin-top: 14.5px;
    margin-bottom: -15.5px;
    width: calc(100% - 200px);
    margin-left: 100px;
}

.route .add-branch {
    top: -11px;
    position: relative;
    height: 30px;
    margin-bottom: 16px;
    border-radius: 15px;
    border: 1px solid transparent;
    align-self: center;
    color: #37f;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 4px 8px rgba(31, 35, 41, .1);
}

.route .add-branch:hover {
    border: 1px solid #37f;
    box-shadow: 0 6px 24px rgba(51, 112, 255, .24);
}

.route .add-branch .add-branch-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    border: none;
    border-radius: 14px;
    background-color: #fff;
}


.branchs {
    display: flex;
    justify-content: center;
    align-content: flex-end;
    flex-direction: row;

}

.branchs .branch {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 40px;
    min-height: 100%;
}

.branchs .branch .top-v-line {
    height: 42.5px;
    top: -41.5px;
    display: block;
    position: absolute;
    width: 1px;
    background-color: #c2c5cc;
}

.branchs .branch:first-child {
    margin-left: 0px;
}

.branchs .branch:first-child>.top-line-mask {
    top: -44px;
    display: block;
    position: absolute;
    width: 50%;
    height: 4px;
    background-color: #f0f0f2;
    left: 0px;
}

.branchs .branch:last-child {
    margin-right: 0px;
}

.branchs .branch:last-child>.top-line-mask {
    top: -44px;
    display: block;
    position: absolute;
    width: 50%;
    height: 4px;
    background-color: #f0f0f2;
    right: 0px;
}

.branchs .branch:first-child .top-v-line {
    left: calc(50% - .5px);
}

.route>.bottom-h-line {
    height: 1px;
    background-color: #c2c5cc;
    width: calc(100% - 200px);
    margin-left: 100px;
}

.route .branch>.bottom-v-line {
    display: block;
    width: 1px;
    background-color: #c2c5cc;
    flex-grow: 1;
}

.flow-node.route>.bottom-v-line {
    height: 100px;
    width: 1px;
    background-color: #c2c5cc;
    align-self: center;
}

.flow-node.route>.add-node-btn {
    bottom: 50px;
    left: 50%;
    box-sizing: initial;
    transform: translateY(50%) translateX(-50%);
}

.flow-node.route>.branchs>.flow-node.branch>.nodes>.flow-node:last-child>.bottom-v-arrow {
    display: none;
}

.flow-node.route .flow-node.branch:last-child>.bottom-line-mask {
    bottom: -4px;
    right: 0;
    display: block;
    position: absolute;
    width: 50%;
    height: 4px;
    background-color: #f0f0f2;
}

.flow-node.route .flow-node.branch:first-child>.bottom-line-mask {
    bottom: -4px;
    left: 0;
    display: block;
    position: absolute;
    width: 50%;
    height: 4px;
    background-color: #f0f0f2;
}


/* 审批属性设置 */
.approval-attributes {
    transition: transform .5s, -webkit-transform .5s;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, .3);
    animation: fadeIn 0.1s ease-in-out forwards;
}

.approval-editor-drawer {
    position: fixed;
    top: 0;
    right: 0px;
    bottom: 0;
    width: 532px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .06);
    background-color: #fff;
    /* transition: transform .5s, -webkit-transform .5s; */
    z-index: 1000;
    font-size: 14px;
    animation: fadeIn 0.45s ease-in-out forwards;
}

.approval-editor-content {
    height: 100%;
    overflow: auto;
}

.approval-editor-form {
    margin-bottom: 20px;
    padding: 0 16px 60px 16px;
}


.approval-editor-name-wrapper {
    display: flex;
    align-items: baseline;
    min-height: 64px;
    padding: 18px 16px;
    border-bottom: 1px solid #e4e5e7;
}

.approval-editor-name-wrapper .approval-editor-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
    color: #171e31;
    cursor: pointer;
}

/* 审批节点名称 */
.approval-name-editor-input {
    border: 1px solid #000000;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
    color: #171e31;
    outline: none;
}

.readonly {
    border: 0px;
}

.item-wrapper {
    margin-top: 16px;
}

.approval-type-wrapper .item-key-wrapper {
    display: flex;
    justify-content: space-between;
}

.item-key {
    font-weight: 600;
    color: #1f2329;
    margin-top: 10px;
}

.item-content {
    margin-top: 8px;
}

.item-content>label>span {
    box-sizing: border-box;
    color: #1f2329;
    z-index: 1;
    margin-left: 0px;
    margin-right: 18px;
    overflow-wrap: break-word;
}

.approval-editor-tab-wrapper {
    margin-top: 24px;

}

.approval-editor-tab-wrapper .approval-function-btn-group {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #1f2329;
    font-size: 14px;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    line-height: unset;
}

.approval-editor-tab-wrapper .approval-function-btn-group .btn {
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    text-align: center;
    line-height: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #d9d9d9;
    border-top: 1.02px solid #d9d9d9;
    cursor: pointer;
}

.role-info {
    margin-top: 8px;
    color: #8f959e;
}

a {
    color: #3370ff;
    text-decoration: none;
    background-color: initial;
    outline: none;
    cursor: pointer;
    -webkit-transition: color .3s;
    transition: color .3s;
    -webkit-text-decoration-skip: objects;
}

a:hover {
    color: #5c92ff;
}

.approval-editor-tab-wrapper .approval-function-btn-group .btn:hover {
    color: #3370ff;
}

.approval-editor-tab-wrapper .approval-function-btn-group .btn:first-child {
    border-radius: 6px 0 0 6px;
    border-right: 0px;
}

.approval-editor-tab-wrapper .approval-function-btn-group .btn:last-child {
    border-radius: 0 6px 6px 0;
    border-left: 0px;
}

.approval-editor-tab-wrapper .approval-function-btn-group .btn.active {
    color: #fff;
    background: #37f;
    border-color: #37f;
}

.approval-function-setting-content {
    margin-top: 8px;
    border: 1px solid #e4e5e7;
    border-radius: 6px;
    overflow: hidden;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.approval-function-setting-content .approver-setting .header {
    padding: 0 16px;
    background: #f5f6f7;
    height: 36px;
    line-height: 36px;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.approval-function-setting-content .approver-setting .header .close-btn {
    font-size: 18px;
    cursor: pointer;
    color: 646a73;
}

.approval-function-setting-content .approver-setting .header .close-btn:hover {
    color: #3370ff;
}

.approval-function-setting-content .approver-setting .options {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 16px;
    font-size: 14px;
}

.approval-function-setting-content .approver-setting .options>div {
    flex-basis: 33.3%;
    margin: 6px 0;
    /* font-size: 14px; */
}

.approval-function-setting-content .approver-setting .options>div span {
    margin-left: 6px;
}

.approval-function-setting-content .approver-setting .sub-content {
    padding: 0 16px 16px;
}

.approval-function-setting-content .approver-setting .sub-content .sub-content-top-line {
    border-top: 1px solid #dee0e3;
    margin-top: 6px;
    margin-bottom: 16px;
}

.approval-function-setting-content .approver-setting .sub-content p {
    margin-top: 6px;
    font-weight: 600;
}

.light-text {
    color: #8f959e;
    font-weight: 400;
}

.add-approver-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.add-approver-wrapper .add-approver-btn {
    display: flex;
    align-items: center;
    width: 56px;
    height: 32px;
    border-radius: 100px;
    border: 1px solid #3370ff;
    justify-content: center;
    margin-right: 8px;
    margin-top: 8px;
    cursor: pointer;
    color: #3370ff;
}

.add-approver-wrapper .add-approver-item {
    display: flex;
    align-items: center;
    min-width: 70px;
    max-width: 50%;
    height: 32px;
    background: #eff0f1;
    border-radius: 16px;
    padding: 0 4px;
    margin-right: 8px;
    margin-top: 8px;
}

.add-approver-wrapper .add-approver-item img {
    width: 24px;
    height: 24px;
    border-radius: 12px;
}

.add-approver-wrapper .add-approver-item div {
    padding: 0;
    margin: 0 4px;
    min-width: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-approver-wrapper .add-approver-item .close-btn {
    color: #646a73;
    font-size: 24px;
    line-height: 22px;
    text-align: right;
    cursor: pointer;
}

.add-approver-wrapper .add-approver-item .close-btn:hover {
    color: #3370ff;
}

.approver-self {
    display: flex;
    flex-wrap: wrap;

}

.approver-self div {
    flex-basis: 48%;
    margin: 6px 0;
}

.add-operator {
    display: inline-block;
    line-height: 24px;
    color: #3370ff;
    cursor: pointer;
    user-select: none;
    /* padding: 2px 4px; */
    border-radius: 6px;
    /* margin-left: 5px; */
    padding: 2px 4px;
    margin-top: 6px;
    font-size: 14px;

}

.add-operator:hover {
    background-color: rgba(51, 112, 255, .1);
}

html {
    -antd-wave-shadow-color: #3370ff;
}

.more-info {
    font-size: 14px;
    color: #666;
}

.goto-other-setting {
    color: #3370ff;
    cursor: pointer;
}

.approver-tip-question-icon {
    margin-left: 5px;
    color: #8f959e;
}

.anticon {
    display: inline-block;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.approver-setting .sub-content .approver-user-selector .supervisor-select-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #646a73;
}

/* 信息悬浮框 */
.anticon {
    position: relative;
}

.anticon .remark-info-panel {
    display: none;
    position: absolute;
    bottom: 30px;
    left: -150px;
    right: 20px;
    width: 474px;
    background-color: #FFFFFF;
    border: 1px solid #DEE0E3;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0px 8px 24px 8px rgba(31, 35, 41, .04), 0px 6px 12px rgba(31, 35, 41, .04), 0px 4px 8px -8px rgba(31, 35, 41, .04);
    box-sizing: border-box;
}

.tip-content {
    font-size: 14px;
    color: #646a73;
    line-height: 22px;
    text-align: left;

}

.tip-content .main-title {
    color: #1f2329;
}

.approval-function-content-approver-set {
    display: block;
}

.approval-function-content-form-authority-set {
    display: none;
}

.approval-function-content-form-authority-set table {
    width: 100%;
    border: 1px solid #dee0e3;
    margin-top: 8px;
}

.approval-function-content-form-authority-set table thead {
    background-color: #fafafc;
}

.approval-function-content-form-authority-set table thead label {
    cursor: pointer;
}

.approval-function-content-form-authority-set table thead label span {
    display: inline-block;
    font-size: 15px;
    margin-left: 8px;
}

.approval-function-content-form-authority-set table td {
    /* height: 37px; */
    border-bottom: 1px solid #dee0e3;
    font-size: 13px;
    padding: 9px 0 9px 10px;
}

.approval-function-content-action-authority-set {
    display: none;
    margin-top: 8px;
    padding: 10px 0;
}

.approval-function-content-action-authority-set .action-content .action-content-item {
    height: 44px;
}

.ant-divider-horizontal {
    display: block;
    clear: both;
    width: 100%;
    min-width: 100%;
    height: 1px;
    margin: 24px 0;
}

.ant-divider,
.ant-divider-vertical {
    position: relative;
    top: -.06em;
    vertical-align: middle;
}

.ant-divider {
    box-sizing: border-box;
    color: #1f2329;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    background: #e8e8e8;
}

.item-wrap {
    margin-bottom: 16px;
}

.approval-editor-footer-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 64px;
    border: 1px solid #ededf0;
    background-color: #fff;
    padding: 16px;
}

.fz-btn {
    height: 32px;
    line-height: 22px;
    padding: 4px 11px;
    font-size: 14px;
    border-radius: 6px;
    min-width: 80px;
    box-sizing: border-box;
    margin: 0;
    list-style: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    user-select: none;
    outline: none;
    border: 1px solid #fff;
    transition: color .1s ease-in, background-color .1s ease-in, border-color .1s ease-in, width .2s ease-in;
    touch-action: manipulation;
    text-decoration: none;
    color: #1f2329;
    background: #fff;
    border-color: #d0d3d6;
}

button,
select {
    text-transform: none;
    /* width: 100%; */
}

option {
    height: 32px;
}

button,
input {
    overflow: visible;
}

.primary {
    color: #fff;
    background: #3370ff;
    border-color: #3370ff;
}

.fz-btn:hover {
    color: #1f2329;
    background: #f2f3f5;
    border-color: #d0d3d6;
}

.fz-btn:active {
    color: #1f2329;
    background: #eff0f1;
    border-color: #d0d3d6;
}

.primary:hover {
    color: #fff;
    background: #4e83fd;
    border-color: #4e83fd;
}

.primary:active {
    color: #fff;
    background: #245bdb;
    border-color: #245bdb;
}

.approval-editor-footer-wrapper .btn-group {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.approval-editor-footer-wrapper .btn-group .cancel {
    margin-right: 12px;
}


.radio-line-group {
    width: 100%;
    display: flex;
    /* flex-direction: row-reverse; */
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 13px;
    padding-bottom: 10px;
}

.radio-line-group>label {
    flex-grow: 1;
    width: 130px;
    padding-top: 8px;
    margin-bottom: 0;
}

.radio-line-group>label span {
    box-sizing: border-box;
    color: #1f2329;
    z-index: 1;
    margin-left: 4px;
    margin-right: 8px;
    overflow-wrap: break-word;
}


#superior-select,
#role-select,
#usergroup-select,
#selfselect-select {
    display: none;
}

#anticon {
    display: inline-block;
    height: 18px;
    width: 18px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center !important;
    border: 1px solid #ccc;
    cursor: pointer;
}

.panel {
    margin-top: 8px;
    border: 1px solid #e4e5e7;
    border-radius: 6px;
    overflow: hidden;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.panel .header {
    padding: 0 16px;
    background: #f5f6f7;
    height: 36px;
    line-height: 36px;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.panel .content {
    padding: 13px;
}

.display-block {
    width: 100% !important;
}

.user-group,
.role-user {
    /* display: none; */
}

/* 提交按钮 */
.submit-btn {
    position: fixed;
    top: 20px;
    right: 20px;
}
.condition-group .row{
    display: flex;
}
.condition-group .row .col:nth-child(1){
    width: 40%;
}
.condition-group .row .col:nth-child(2){
    width: 20%;
    margin-left: 10px;
}
.condition-group .row .col:nth-child(3){
    width: 40%;
    margin-left: 10px;
}
</style>